﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>按钮式表单 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-spinbutton" class="nav-link font-weight-bold"><span>按钮式表单(Form Spinbutton)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概述</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-model-value" class="nav-link"><span>v-model 值</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#min-max-and-step" class="nav-link"><span>最小、最大和步长</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#number-wrapping" class="nav-link"><span>数字包装</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling" class="nav-link"><span>样式</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#size" class="nav-link"><span>尺寸</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#inline" class="nav-link"><span>内联</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#vertical" class="nav-link"><span>垂直</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#width" class="nav-link"><span>宽度</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#number-formatting-and-locale" class="nav-link"><span>数字格式和区域设置</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabled-and-readonly-states" class="nav-link"><span>禁用和只读状态</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#validation-states" class="nav-link"><span>验证状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#required-prop" class="nav-link"><span>Required 属性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#events" class="nav-link"><span>事件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#implementation-notes" class="nav-link"><span>实施说明</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-spinbutton" class="nav-link"><span>&lt;b-form-spinbutton&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">按钮式表单</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">按钮式表单(Form Spinbutton)</h1>
  <p class="bd-lead">旋转按钮是一个 BootstrapVue 自定义数值范围窗体控件。旋转按钮允许在最小值和最大值的范围内递增或递减一个数值，可选步长值。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#overview" class=""><span data-v-811345e6="">Overview</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-value" class=""><span data-v-811345e6="">v-model value</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#min-max-and-step" class=""><span data-v-811345e6="">Min, max, and step</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#number-wrapping" class=""><span data-v-811345e6="">Number wrapping</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling" class=""><span data-v-811345e6="">Styling</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#size" class=""><span data-v-811345e6="">Size</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#inline" class=""><span data-v-811345e6="">Inline</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertical" class=""><span data-v-811345e6="">Vertical</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#width" class=""><span data-v-811345e6="">Width</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#number-formatting-and-locale" class=""><span data-v-811345e6="">Number formatting and locale</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-and-readonly-states" class=""><span data-v-811345e6="">Disabled and readonly states</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#validation-states" class=""><span data-v-811345e6="">Validation states</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#required-prop" class=""><span data-v-811345e6="">Required prop</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#events" class=""><span data-v-811345e6="">事件</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#implementation-notes" class=""><span data-v-811345e6="">Implementation notes</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span data-v-811345e6="">See also</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-spinbutton" class=""><span data-v-811345e6="">&lt;b-form-spinbutton&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-spinbutton&gt;</code> 兼容 <a href="https://www.w3.org/TR/wai-aria-practices-1.2/#spinbutton" target="_blank" rel="noopener">WAI-ARIA</a> ，允许 <a href="#accessibility" class="font-weight-bold">keyboard control</a>【键盘控制】，并支持水平（默认）和垂直布局。</p>
<p>与 <a href="../../../bootstrap-vue/docs/components/form-input#range-type-input" class="font-weight-bold">range type inputs</a>【范围类型输入】类似，BootstrapVue的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-spinbutton&gt;</code> <em>不允许</em> 用户键入值。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-demo notranslate">
<div>
<label for="demo-sb">Spin Button</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="demo-sb" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="demo-sb" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">50</div>
</output>
<button tabindex="-1" type="button" aria-controls="demo-sb" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<p>Value: 50</p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable live" translate="no" contenteditable="true"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">label</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">for</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demo-sb"</span></span></span><span class="hljs-tag">&gt;</span></span>Spin Button<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">label</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">b-form-spinbutton</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demo-sb"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">v-model</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"value"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">min</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"1"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">max</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"100"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">b-form-spinbutton</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>Value: {{ value }}<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span>

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript"> </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">export</span></span></span><span class="javascript"> </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">default</span></span></span><span class="javascript"> {
    data() {
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">return</span></span></span><span class="javascript"> {
        </span><span class="hljs-attr"><span class="javascript"><span class="hljs-attr">value</span></span></span><span class="javascript">: </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">50</span></span></span><span class="javascript">
      }
    }
  }
</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span></pre></figure>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概述<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p><kbd class="notranslate" translate="no">ArrowUp</kbd> 和 <kbd class="notranslate" translate="no">ArrowDown</kbd> 键可用于增加或减少该值。</p>
<p>要通过本机浏览器表单提交提交，旋转按钮必须具有通过 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置的名称。这将创建一个包含输入按钮当前值的隐藏输入。如果旋转按钮没有值，则隐藏输入的值将为空字符串。</p>
<h2 id="v-model-value" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-model</code> 值<a class="anchorjs-link" href="#v-model-value" aria-labelledby="v-model-value"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">v-model</code> 始终以数字形式返回值。如果未设置初始值，则 <code translate="no" class="notranslate text-nowrap">v-model</code> 可以为 <code translate="no" class="notranslate text-nowrap">null</code> 。</p>
<p>如果初始值为 <code translate="no" class="notranslate text-nowrap">null</code> ，则不会在旋转按钮中显示任何值。当旋转按钮没有值时（例如，<code translate="no" class="notranslate text-nowrap">placeholder="--"</code> ），请使用 <code translate="no" class="notranslate text-nowrap">placeholder</code>【占位符】属性显示字符串。</p>
<h2 id="min-max-and-step" class="bv-no-focus-ring"><span class="bd-content-title">最小、最大和步长<a class="anchorjs-link" href="#min-max-and-step" aria-labelledby="min-max-and-step"></a></span></h2>
<p>旋转按钮的默认范围是 <code translate="no" class="notranslate text-nowrap">1</code> 到 <code translate="no" class="notranslate text-nowrap">100</code> ，可以通过设置 <code translate="no" class="notranslate text-nowrap">min</code> 和 <code translate="no" class="notranslate text-nowrap">max</code> 属性来更改。默认的步长增量为 <code translate="no" class="notranslate text-nowrap">1</code> ，可以通过 <code translate="no" class="notranslate text-nowrap">step</code>【步长】道具更改（允许十进制值）。</p>
<p>设置 <code translate="no" class="notranslate text-nowrap">step</code>【步长】后，该值将始终是步长加最小值的倍数。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-step notranslate">
<div>
<label for="sb-step">Spin button with step of 0.25</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-step" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-step" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="0" aria-valuemax="10" aria-valuenow="0" aria-valuetext="0.00" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">0.00</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-step" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-step"</span>&gt;</span>Spin button with step of 0.25<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-step"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span>
      <span class="hljs-attr">max</span>=<span class="hljs-string">"10"</span>
      <span class="hljs-attr">step</span>=<span class="hljs-string">"0.25"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="number-wrapping" class="bv-no-focus-ring"><span class="bd-content-title">数字包装<a class="anchorjs-link" href="#number-wrapping" aria-labelledby="number-wrapping"></a></span></h2>
<p>默认情况下，当该值增加到最 <code translate="no" class="notranslate text-nowrap">max</code> 时，按增量按钮将不起作用。同样，当该值作为 <code translate="no" class="notranslate text-nowrap">min</code> 值时，按减量按钮将无效。</p>
<p>若要使旋转按钮在递增时从 max 到 min 换行（在递减时从min到max换行），请将 <code translate="no" class="notranslate text-nowrap">wrap</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-wrap notranslate">
<div>
<label for="sb-wrap">Wrapping value spin button</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-wrap" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-wrap" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="25" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">--</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-wrap" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-wrap"</span>&gt;</span>Wrapping value spin button<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-wrap"</span> <span class="hljs-attr">wrap</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"--"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h2 id="styling" class="bv-no-focus-ring"><span class="bd-content-title">样式<a class="anchorjs-link" href="#styling" aria-labelledby="styling"></a></span></h2>
<h3 id="size" class="bv-no-focus-ring"><span class="bd-content-title">尺寸<a class="anchorjs-link" href="#size" aria-labelledby="size"></a></span></h3>
<p>与其他窗体控件一样，<code translate="no" class="notranslate text-nowrap">&lt;b-form-spinbutton&gt;</code> 通过将 <code translate="no" class="notranslate text-nowrap">size</code> 属性的大小属性分别设置为 <code translate="no" class="notranslate text-nowrap">'sm'</code> 或 <code translate="no" class="notranslate text-nowrap">'lg'</code> 支持大小调整。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-size notranslate">
<div>
<label for="sb-small">Spin button - Small size</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 mb-2 form-control-sm d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-small" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-small" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">--</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-small" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<label for="sb-default">Spin button - Default size</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 mb-2 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-default" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-default" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">--</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-default" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<label for="sb-large">Spin button - Large size</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 mb-2 form-control-lg d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-large" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-large" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">--</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-large" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-small"</span>&gt;</span>Spin button - Small size<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-small"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"--"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-default"</span>&gt;</span>Spin button - Default size<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-default"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"--"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-large"</span>&gt;</span>Spin button - Large size<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-large"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"--"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h3 id="inline" class="bv-no-focus-ring"><span class="bd-content-title">内联<a class="anchorjs-link" href="#inline" aria-labelledby="inline"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-inline notranslate">
<div>
<label for="sb-inline">Inline spin button</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-inline-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-inline" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-inline" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" class="flex-grow-1 align-self-center px-1 border-left border-right">
<div class="w-100">50</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-inline" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-inline"</span>&gt;</span>Inline spin button<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-inline"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">inline</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">50</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>旋转按钮将自动调整其宽度以适合显示的值。有关控制或设置宽度的详细信息，请参见下面的 <a href="#width" class="font-weight-bold">Width section</a>【宽度部分】。</p>
<h3 id="vertical" class="bv-no-focus-ring"><span class="bd-content-title">垂直<a class="anchorjs-link" href="#vertical" aria-labelledby="vertical"></a></span></h3>
<p>旋转按钮可以在垂直模式下定向：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-vertical notranslate">
<div>
<label for="sb-vertical">Vertical spin button</label>
<br>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-controls="sb-vertical" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-vertical" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom">
<div class="w-100">50</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-vertical" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-vertical"</span>&gt;</span>Vertical spin button<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-vertical"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">vertical</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">50</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>垂直旋转按钮也可以使用 <a href="#size" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">size</code> 属性</a> 调整大小。在垂直模式下，旋转按钮将呈现为嵌入式元素。</p>
<p>旋转按钮将自动调整其宽度以适合显示的值。有关控制或设置宽度的详细信息，请参见下面的 <a href="#width" class="font-weight-bold">Width section</a>【宽度部分】。</p>
<h3 id="width" class="bv-no-focus-ring"><span class="bd-content-title">宽度<a class="anchorjs-link" href="#width" aria-labelledby="width"></a></span></h3>
<p>控件（当不是 <code translate="no" class="notranslate text-nowrap">vertical</code>【垂直】控件或 <code translate="no" class="notranslate text-nowrap">inline</code>【嵌入式】控件时）将扩展到父容器的最大宽度。您可以通过实用程序类（如 <code translate="no" class="notranslate text-nowrap">w-25</code> ，<code translate="no" class="notranslate text-nowrap">w-50</code> ，<code translate="no" class="notranslate text-nowrap">w-75</code> ）控制宽度，也可以使用样式设置宽度。</p>
<p>设置 <code translate="no" class="notranslate text-nowrap">vertical</code>【垂直】或 <code translate="no" class="notranslate text-nowrap">inline</code>【嵌入式】时，控件将根据显示的值调整其宽度。您可以使用CSS样式来控制控件的整体宽度（即 <code translate="no" class="notranslate text-nowrap">style="width: 10rem;</code> ）。</p>
<h3 id="number-formatting-and-locale" class="bv-no-focus-ring"><span class="bd-content-title">数字格式和区域设置<a class="anchorjs-link" href="#number-formatting-and-locale" aria-labelledby="number-formatting-and-locale"></a></span></h3>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-spinbutton&gt;</code> 将在用户浏览器的默认区域设置中格式化显示的数字。您可以通过 <code translate="no" class="notranslate text-nowrap">locale</code> 属性指定语言环境（或语言环境数组）来更改本地化格式。数字格式本地化是通过 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">Intl.NumberFormat</code></a> 执行的。可用的语言环境将取决于浏览器的实现。本地化仅控制向用户显示值，而不会影响 <code translate="no" class="notranslate text-nowrap">v-model</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-locale notranslate">
<div>
<label for="sb-locales">Locale</label>
<select id="sb-locales" class="custom-select">
<option value="en">English</option>
<option value="de">German</option>
<option value="fr-CA">French (Canadian)</option>
<option value="fa">Persian</option>
<option value="ar-EG">Arabic (Egyptian)</option>
</select>
<label for="sb-local" class="mt-2">Spin button with locale</label>
<div role="group" lang="fr-CA" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-locale" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-locale" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="0" aria-valuemax="10" aria-valuenow="0" aria-valuetext="0,000" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">0,000</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-locale" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<p>Value: 0</p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-locales"</span>&gt;</span>Locale<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-locales"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"locale"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"locales"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-local"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>Spin button with locale<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-locale"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">:locale</span>=<span class="hljs-string">"locale"</span>
      <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span>
      <span class="hljs-attr">max</span>=<span class="hljs-string">"10"</span>
      <span class="hljs-attr">step</span>=<span class="hljs-string">"0.125"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">locale</span>: <span class="hljs-string">'fr-CA'</span>,
        <span class="hljs-attr">locales</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'en'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'English'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'de'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'German'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'fr-CA'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'French (Canadian)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'fa'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Persian'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'ar-EG'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Arabic (Egyptian)'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>或者，您可以提供自己的数字格式化程序功能来格式化显示的值。这对于显示文本（而不是数字）或要实现 <code translate="no" class="notranslate text-nowrap">Intl.NumberFormat</code> 的不同功能很有用。</p>
<p>要提供格式化程序功能，请将 <code translate="no" class="notranslate text-nowrap">formatter-fn</code> 属性设置为方法参考。格式化程序将传递一个参数，该参数是当前值。请注意，格式化程序仅影响显示给用户的值，而不影响 <code translate="no" class="notranslate text-nowrap">v-model</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-formatter notranslate">
<div>
<label for="sb-days" class="mt-2">Spin button with formatter</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-days" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-days" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="0" aria-valuemax="6" aria-valuenow="0" aria-valuetext="Sunday" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">Sunday</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-days" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<p>Value: 0</p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-days"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>Spin button with formatter<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-days"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">:formatter-fn</span>=<span class="hljs-string">"dayFormatter"</span>
      <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span>
      <span class="hljs-attr">max</span>=<span class="hljs-string">"6"</span>
      <span class="hljs-attr">wrap</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">days</span>: [<span class="hljs-string">'Sunday'</span>, <span class="hljs-string">'Monday'</span>, <span class="hljs-string">'Tuesday'</span>, <span class="hljs-string">'Wednesday'</span>, <span class="hljs-string">'Thursday'</span>, <span class="hljs-string">'Friday'</span>, <span class="hljs-string">'Saturday'</span>]
      }
    },
    <span class="hljs-attr">methods</span>: {
      dayFormatter(value) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.days[value]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="disabled-and-readonly-states" class="bv-no-focus-ring"><span class="bd-content-title">禁用和只读状态<a class="anchorjs-link" href="#disabled-and-readonly-states" aria-labelledby="disabled-and-readonly-states"></a></span></h2>
<p>将属性设置为 <code translate="no" class="notranslate text-nowrap">disabled</code> 会将组件置于禁用的非交互状态。<code translate="no" class="notranslate text-nowrap">readonly</code> 属性将组件置于只读状态（可聚焦，但用户无法更改该值）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-disabled-readonly notranslate">
<div class="row">
<div class="mb-2 col-md-6">
<label for="sb-disabled">Disabled spin button</label>
<div role="group" lang="zh-CN" dir="ltr" class="b-form-spinbutton form-control p-0 disabled d-flex align-items-stretch">
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="sb-disabled" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-disabled" role="spinbutton" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">50</div>
</output>
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="sb-disabled" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
<div class="mb-2 col-md-6">
<label for="sb-readonly">Readonly spin button</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 readonly d-flex align-items-stretch">
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="sb-readonly" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-readonly" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">50</div>
</output>
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="sb-readonly" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-disabled"</span>&gt;</span>Disabled spin button<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-disabled"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-readonly"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">""</span>&gt;</span>Readonly spin button<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-readonly"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">readonly</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">50</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>在本机浏览器提交表单期间，不会提交禁用的旋转按钮，而将提交只读旋转按钮（只要已通过 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置了名称）。</p>
<h2 id="validation-states" class="bv-no-focus-ring"><span class="bd-content-title">验证状态<a class="anchorjs-link" href="#validation-states" aria-labelledby="validation-states"></a></span></h2>
<p>当您默认为 <code translate="no" class="notranslate text-nowrap">null</code> 值并且用户尚未选择值时，可以使用 <code translate="no" class="notranslate text-nowrap">state</code> 属性将上下文验证样式之一应用于组件。</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">true</code> 将有效样式应用于组件</li>
<li><code translate="no" class="notranslate text-nowrap">false</code> 将无效样式应用于组件</li>
<li><code translate="no" class="notranslate text-nowrap">null</code> 不应用任何上下文样式（默认）</li>
</ul>
<h3 id="required-prop" class="bv-no-focus-ring"><span class="bd-content-title">Required 属性<a class="anchorjs-link" href="#required-prop" aria-labelledby="required-prop"></a></span></h3>
<p>请注意，required 属性仅在组件上生成 <code translate="no" class="notranslate text-nowrap">aria-required="true"</code> 属性，并且不对表单提交执行任何验证。您必须在应用程序逻辑中验证 <code translate="no" class="notranslate text-nowrap">v-model</code> 。</p>
<p>请注意，如果设置了 <code translate="no" class="notranslate text-nowrap">required</code> 属性，并且 <code translate="no" class="notranslate text-nowrap">v-model</code> 为 <code translate="no" class="notranslate text-nowrap">null</code> ，则属性 <code translate="no" class="notranslate text-nowrap">aria-invalid="true"</code> 将呈现在组件上。</p>
<h2 id="events" class="bv-no-focus-ring"><span class="bd-content-title">事件<a class="anchorjs-link" href="#events" aria-labelledby="events"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">input</code> 事件用于更新 <code translate="no" class="notranslate text-nowrap">v-model</code> ，并在值更改时发出。</p>
<p>一旦用户释放鼠标按钮（在按下增加或减少按钮时），或者当用户释放 <kbd class="notranslate" translate="no">ArrowDown</kbd> 或 <kbd class="notranslate" translate="no">ArrowUp</kbd> 键时，就会发出 <code translate="no" class="notranslate text-nowrap">change</code> 事件。当您需要对输入进行去抖动时，这会很方便。</p>
<p>以下示例说明了 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 事件之间的区别。单击并按住增加或减少按钮（或使用向上/向下箭头键）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-spinbutton-events notranslate">
<div>
<label for="sb-input">Spin button - input and change events</label>
<div role="group" lang="zh-CN" tabindex="-1" dir="ltr" class="b-form-spinbutton form-control p-0 d-flex align-items-stretch">
<button tabindex="-1" type="button" aria-controls="sb-input" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<output id="sb-input" role="spinbutton" tabindex="0" aria-live="off" aria-valuemin="1" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" class="flex-grow-1 w-100 align-self-center px-1 border-left border-right">
<div class="w-100">0</div>
</output>
<button tabindex="-1" type="button" aria-controls="sb-input" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0 py-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<p>Input event: 0</p>
<p>Change event: </p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"sb-input"</span>&gt;</span>Spin button - input and change events<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-spinbutton</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"sb-input"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value1"</span>
      @<span class="hljs-attr">change</span>=<span class="hljs-string">"value2 = $event"</span>
      <span class="hljs-attr">wrap</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-spinbutton</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Input event: {{ value1 }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Change event: {{ value2 }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">value2</span>: <span class="hljs-literal">null</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>对准旋转按钮时，可以使用以下键盘控件：</p>
<ul>
<li><kbd class="notranslate" translate="no">Home</kbd> 将值设置为 <code translate="no" class="notranslate text-nowrap">min</code> 值</li>
<li><kbd class="notranslate" translate="no">End</kbd> 将值设置为 <code translate="no" class="notranslate text-nowrap">max</code> 值</li>
<li><kbd class="notranslate" translate="no">ArrowUp</kbd> 逐步增加值</li>
<li><kbd class="notranslate" translate="no">ArrowDown</kbd> 递减步长值</li>
<li><kbd class="notranslate" translate="no">PageUp</kbd> 将值增加步数乘以 <code translate="no" class="notranslate text-nowrap">repeat-step-multiplier</code>【重复步乘数】</li>
<li><kbd class="notranslate" translate="no">PageDown</kbd> 将值减小步数乘以 <code translate="no" class="notranslate text-nowrap">repeat-step-multiplier</code>【重复步乘数】</li>
</ul>
<p>按住 <kbd class="notranslate" translate="no">ArrowUp</kbd> ，<kbd class="notranslate" translate="no">ArrowDown</kbd> ，<kbd class="notranslate" translate="no">PageUp</kbd> ，或 <kbd class="notranslate" translate="no">PageDown</kbd> 键将自动重复递增或递减（在初始延迟之后）。长时间按住 <kbd class="notranslate" translate="no">ArrowUp</kbd> 或 <kbd class="notranslate" translate="no">ArrowDown</kbd> 键会将增量或减量乘以 <code translate="no" class="notranslate text-nowrap">repeat-step-multiplier</code>【重复步乘数】。</p>
<p>注意 <code translate="no" class="notranslate text-nowrap">repeat-delay</code> ，<code translate="no" class="notranslate text-nowrap">repeat-threshold</code> 和 <code translate="no" class="notranslate text-nowrap">repeat-interval</code> 仅适用于 <kbd class="notranslate" translate="no">ArrowUp</kbd> 或 <kbd class="notranslate" translate="no">ArrowDown</kbd> 键。</p>
<h2 id="implementation-notes" class="bv-no-focus-ring"><span class="bd-content-title">实施说明<a class="anchorjs-link" href="#implementation-notes" aria-labelledby="implementation-notes"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-spinbutton&gt;</code> 结合使用了 Bootstrap v4 实用程序类（边距，填充和flex），表单控制和按钮类，以及其他自定义 BootstrapVue SCSS / CSS。</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/form-input#range-type-input" class="font-weight-bold">Range type input</a>【范围类型输入】</li>
</ul>
</section>
<section class="bd-content bd-component-reference">
<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form-spinbutton#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-spinbutton" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-spinbutton&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-spinbutton#comp-ref-b-form-spinbutton" class="anchorjs-link" aria-labelledby="comp-ref-b-form-spinbutton" target="_self"></a></span></h3>
<span data-v-866a22e8="" class="badge badge-success">v2.5.0+</span> <!----></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-spinbutton/form-spinbutton.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-spinbutton-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-spinbutton&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-spinbutton-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-spinbutton&gt;</code> 属性 </a></li>
<!----> <!---->
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-spinbutton-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-spinbutton&gt;</code> 事件 </a></li>
<!---->
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-spinbutton-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-spinbutton#comp-ref-b-form-spinbutton-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-spinbutton-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-spinbutton&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-spinbutton&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-spinbutton-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-spinbutton#comp-ref-b-form-spinbutton-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-spinbutton-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__648">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="id" class="" id="__BVID__648__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<!----><!---->
<tr role="row" data-pk="value" class="" id="__BVID__648__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">旋转按钮的值。 绑定到v-model</td>
</tr>
<!----><!---->
<tr role="row" data-pk="min" class="" id="__BVID__648__row_min">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">min</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">可以选择的最小值。 允许负数</td>
</tr>
<!----><!---->
<tr role="row" data-pk="max" class="" id="__BVID__648__row_max">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">max</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">100</code></td>
<td aria-colindex="4" role="cell" class="">可以选择的最大值。须大于“min”属性。允许使用负数</td>
</tr>
<!----><!---->
<tr role="row" data-pk="step" class="" id="__BVID__648__row_step">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">step</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">一个正数，指定值必须遵循的粒度</td>
</tr>
<!----><!---->
<tr role="row" data-pk="wrap" class="" id="__BVID__648__row_wrap">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">wrap</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置时，允许值在读取最小值或最大值时回绕</td>
</tr>
<!----><!---->
<tr role="row" data-pk="formatter-fn" class="" id="__BVID__648__row_formatter-fn">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">formatter-fn</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">对格式化显示值的方法的引用。 它传递了一个参数作为当前值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="size" class="" id="__BVID__648__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>
<!----><!---->
<tr role="row" data-pk="placeholder" class="" id="__BVID__648__row_placeholder">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">placeholder</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">v-model 为 null 时显示的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="disabled" class="" id="__BVID__648__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将组件置于禁用状态</td>
</tr>
<!----><!---->
<tr role="row" data-pk="readonly" class="" id="__BVID__648__row_readonly">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">readonly</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将组件置于只读状态</td>
</tr>
<!----><!---->
<tr role="row" data-pk="required" class="" id="__BVID__648__row_required">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">required</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在组件上添加`aria-required =“true”`属性。注意，当值为空时，这不会阻止提交。</td>
</tr>
<!----><!---->
<tr role="row" data-pk="name" class="" id="__BVID__648__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="form" class="" id="__BVID__648__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的ID。在控件上设置“form”属性</td>
</tr>
<!----><!---->
<tr role="row" data-pk="state" class="" id="__BVID__648__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态</td>
</tr>
<!----><!---->
<tr role="row" data-pk="inline" class="" id="__BVID__648__row_inline">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">inline</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将组件呈现为嵌入式元素</td>
</tr>
<!----><!---->
<tr role="row" data-pk="vertical" class="" id="__BVID__648__row_vertical">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">vertical</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，以垂直布局渲染组件</td>
</tr>
<!----><!---->
<tr role="row" data-pk="aria-label" class="" id="__BVID__648__row_aria-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-label</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在旋转按钮的“aria-label”属性中的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="aria-controls" class="" id="__BVID__648__row_aria-controls">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-controls</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">如果此组件控制另一个组件或元素，请将其设置为受控组件或元素的ID</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-decrement" class="" id="__BVID__648__row_label-decrement">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-decrement</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Decrement'</code></td>
<td aria-colindex="4" role="cell" class="">递减按钮上用于“aria-label”属性的文本</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-increment" class="" id="__BVID__648__row_label-increment">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-increment</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Increment'</code></td>
<td aria-colindex="4" role="cell" class="">增量按钮上用于“aria-label”属性的文本</td>
</tr>
<!----><!---->
<tr role="row" data-pk="locale" class="" id="__BVID__648__row_locale">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">locale</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">指定用于格式化数字的本地名称。默认为浏览器语言环境。仅在使用内部格式化程序时适用</td>
</tr>
<!----><!---->
<tr role="row" data-pk="repeat-delay" class="" id="__BVID__648__row_repeat-delay">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">repeat-delay</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">500</code></td>
<td aria-colindex="4" role="cell" class="">自动重复递增或递减发生之前的延迟（以毫秒为单位）。必须为正整数。 要求用户单击/按下并按住</td>
</tr>
<!----><!---->
<tr role="row" data-pk="repeat-interval" class="" id="__BVID__648__row_repeat-interval">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">repeat-interval</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">100</code></td>
<td aria-colindex="4" role="cell" class="">递增或递减重复之间的间隔（以毫秒为单位）。必须为正整数</td>
</tr>
<!----><!---->
<tr role="row" data-pk="repeat-threshold" class="" id="__BVID__648__row_repeat-threshold">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">repeat-threshold</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">10</code></td>
<td aria-colindex="4" role="cell" class="">在通过“repeat-step-multiplier”增加步长之前发生的重复次数。必须为正整数</td>
</tr>
<!----><!---->
<tr role="row" data-pk="repeat-step-multiplier" class="" id="__BVID__648__row_repeat-step-multiplier">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">repeat-step-multiplier</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">4</code></td>
<td aria-colindex="4" role="cell" class="">达到“repeat-threshold”时要跳过的步骤数。 必须为正整数。 此值也用于上翻页和下翻页键</td>
</tr>
<!----><!----><!----><!---->
</tbody>
<!---->
</table>
</div>
<!----> <!----></article>
<!----> <!---->
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-spinbutton-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-spinbutton#comp-ref-b-form-spinbutton-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-spinbutton-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__684">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="input" class="" id="__BVID__684__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code> <!----></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">旋转按钮的当前值</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">每次值更改时都会更新以更新 v-model</td>
</tr>
<tr role="row" data-pk="change" class="" id="__BVID__684__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code> <!----></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">旋转按钮的当前值</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当用户释放鼠标按钮或键时发出</td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
</article>
<!----></section>

<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-spinbutton#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__696">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-spinbutton&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormSpinbutton</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormSpinbutton } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-spinbutton'</span>, BFormSpinbutton)</pre></figure>
</article>
<!---->
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/form-spinbutton#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__706">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormSpinbuttonPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<!---->
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormSpinbuttonPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormSpinbuttonPlugin)</pre></figure>












</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
